<template>
  <el-row :gutter="20">
    <el-col>
      <el-form :inline="true" :model="filter" class="demo-form-inline">
        <el-form-item label="分类">
          <el-select v-model="filter.categoryIds" multiple placeholder="分类">
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input type="text" v-model="filter.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
      <el-card class="article" v-for="(item,idx) in pageArticle.list" :key="idx">
        <el-row class="content" @click.prevent="changPath('/article/detail/'+item.id)">
          <el-row :style="{'width':'100%','margin-bottom':'5px'}">
            <el-tag class="tag" size="mini" v-for="(tag) in item.categoryList" :key="tag.id">{{ tag.name }}</el-tag>
          </el-row>
          <el-row class="title">
            {{ item.title }}
          </el-row>
          <el-row class="description">
            {{ item.description }}
          </el-row>
          <el-row class="info">
            <el-col :span="12">
              <small>{{ item.userName }}</small>
              <small>{{ GMTToStr(item.createTime) }}</small>
            </el-col>
            <el-col :span="12" :style="{'text-align': 'right'}">
              <small>
                <el-icon>
                  <comment></comment>
                </el-icon>
                {{ item.commentNum }}
              </small>
              <small>
                <el-icon>
                  <star-filled/>
                </el-icon>
                {{ item.starNum }}
              </small>
            </el-col>
          </el-row>
        </el-row>
      </el-card>
    </el-col>
    <el-col class="hidden-md-and-down" :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
      <el-row :style="{'margin-bottom':'15px'}">
        <el-button :style="{'width':'250px'}" type="primary" @click.prevent="changPath('/article/publish')">发布文章
        </el-button>
      </el-row>
      <el-space direction="vertical">
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header">
              <strong>关注排行榜</strong>
            </div>
          </template>
          <div v-for="(item,idx) in starTopArticle.list" :key="idx" class="text item">
            <el-button type="text" class="startTopItem" @click.prevent="changPath('/article/detail/'+item.id)">
              <el-tag type="danger" :style="{'margin-right':'10px'}"> 荐</el-tag>
              {{ item.title }}
            </el-button>
          </div>
        </el-card>
      </el-space>
    </el-col>
  </el-row>
  <el-pagination background layout="prev, pager, next"
                 :page-size="pageArticle.pageSize"
                 :total="pageArticle.total"
                 :current-page="pageArticle.page"
                 @current-change="currentChange"
  >
  </el-pagination>
</template>

<script>
import { defineComponent, onMounted, reactive } from 'vue'
import { pagePublicArticle, startTopArticle } from '@/api/article'
import { GMTToStr } from '@/utils/date'
import { Comment, StarFilled } from '@element-plus/icons'
import { getCategoryList } from '@/api/category'
import router from '@/router'

export default defineComponent({
  name: 'Index',
  components: {
    Comment,
    StarFilled
  },
  setup () {
    const filter = reactive({
      categoryIds: [],
      title: ''
    })
    const pageArticle = reactive({
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
      last: true
    })
    const starTopArticle = reactive({
      list: []
    })
    const updatePublicArticle = async () => {
      const reply = await pagePublicArticle({
        page: pageArticle.page - 1,
        pageSize: pageArticle.pageSize,
        title: filter.title,
        categoryIds: filter.categoryIds
      })

      if (reply.data.data && reply.data.code === 0) {
        pageArticle.list = reply.data.data.list
        pageArticle.total = reply.data.data.total
        pageArticle.last = reply.data.data.last
      }
    }
    const updateStarTopArticle = async () => {
      const reply = await startTopArticle({
        title: filter.title,
        categoryIds: filter.categoryIds
      })
      if (reply.data.data && reply.data.code === 0) {
        starTopArticle.list = reply.data.data.list
      }
    }
    const categoryList = reactive([])
    const initCategoryList = async () => {
      const reply = await getCategoryList()
      categoryList.length = 0
      if (reply.data.code === 0) {
        reply.data.data.list.forEach((item) => {
          categoryList.push(item)
        })
      }
    }
    const search = () => {
      updateStarTopArticle()
      updatePublicArticle(pageArticle.page)
    }
    const currentChange = (data) => {
      pageArticle.page = data
      updatePublicArticle()
    }
    const changPath = (path) => {
      router.push(path)
    }
    onMounted(() => {
      search()
      initCategoryList()
    })
    return {
      pageArticle,
      starTopArticle,
      updatePublicArticle,
      updateStarTopArticle,
      categoryList,
      GMTToStr,
      filter,
      search,
      currentChange,
      changPath
    }
  }
})
</script>

<style>
.article {
  position: relative;
  width: 100%;
  margin: 0 0 15px;
  padding: 15px 2px 20px 0;
  border-bottom: 1px solid #f0f0f0;
  word-wrap: break-word;
}

.title {
  margin: -7px 0 4px;
  display: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  width: 100%;
}

.description {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 24px;
  color: #999;
  width: 100%;
}

.info {
  padding-right: 0 !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  width: 100%
}

.author small {
  margin-right: 10px;
}

.info small {
  margin-right: 10px;
  color: #b4b4b4;
}

.tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.startTopItem {
  color: #909090;
}

.startTopItem:hover {
  color: #409EFF;
}
</style>
